<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8" />
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- Mobile viewport optimized: h5bp.com/viewport -->
    <meta name="viewport" content="width=device-width">

    <title>能耗管理系统-登录</title>
    <link rel="shortcut icon" href="../../resources/favicon.ico" th:href="@{/resources/favicon.ico}">
    <script src="../../resources/lib/jquery/jquery-1.8.2.min.js"
            th:src="@{/resources/lib/jquery/jquery-1.8.2.min.js}"></script>


    <style type="text/css">

    html {
        padding:0;
        margin:0;
        height: 100%;
    }
        body {
            width: 100%;
            /*height: 100%;*/
            overflow: hidden;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
        #container {
        }
        .divcss5-c{margin-top:10px}
        .big_label {
            color: #A9DAE4;
            text-shadow: 0px 2px 3px #555;
            font-size: 25px;
            font-family: '黑体';
            line-height: 25px;
        }
        .big_label input {
            font-size: 25px;
            line-height: 25px;
            height: 30px;
        }

        .big_label div {
            float: left;
            margin-top: 30px;
        }

        .error_label {
            width: 100px;
            visibility: hidden;
            color: red;
            font-size: 16px;
            margin-left:154px;
        }


        .button {
            width: 100px;
            margin: 30px auto;
        }

        .button a {
            display: block;
            height: 45px;
            width: 70px;
            /*TYPE*/
            color: white;
            font: 24px/50px '黑体', Helvetica, Verdana, sans-serif;
            text-decoration: none;
            text-align: center;
            text-transform: uppercase;
            /*GRADIENT*/
            background: #00b7ea; /* Old browsers */
            background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
            background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
        }

        .button a, p {
            -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
            -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
            box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
        }

        p {
            background: #222;
            display: block;
            height: 40px;
            width: 80px;
            margin: -50px 0 0 10px;
            /*TYPE*/
            text-align: center;
            font: 12px/45px Helvetica, Verdana, sans-serif;
            color: #fff;
            /*POSITION*/
            position: absolute;
            z-index: -1;
            /*TRANSITION*/
            -webkit-transition: margin 0.5s ease;
            -moz-transition: margin 0.5s ease;
            -o-transition: margin 0.5s ease;
            -ms-transition: margin 0.5s ease;
            transition: margin 0.5s ease;
        }

        /* HOVER
           ================================================== */

        .button:hover .bottom { margin: -10px 0 0 10px }

        .button:hover .top {
            margin: -80px 0 0 10px;
            line-height: 35px;
        }

        /* ACTIVE
           ================================================== */

        .button a:active {
            background: #00b7ea; /* Old browsers */
            background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
            background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
        }

        .button:active .bottom { margin: -20px 0 0 10px }

        .button:active .top { margin: -70px 0 0 10px }


    </style>
    <script type="text/javascript" src="../../resources/lib/jquery/jquery.tmpl.js"
            th:src="@{/resources/lib/jquery/jquery.tmpl.js}"></script>

</head>

<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" oncopy="return false" onselect="return false" >
<div id="container">
    <h3>
        &nbsp;
    </h3>
    <div >
        <div id="loginDiv" style="position:absolute; left: 40%; top:70%;width:500px;height:320px; margin-top:-150px;border: 2px solid #dcfdff;border-style: outset">
            <div class="big_label">
                <div style="margin: 30px;">用户名：</div>
                <div>
                    <input type="text" id="username" >
                </div>
                <br style="clear: both;" />
            </div>
            <div>
               <span id="unNull" class="error_label">
                   请输入用户名！
               </span>
            </div>
            <div class="big_label">
                <div style="margin: 30px;">密&nbsp;&nbsp;码：</div>
                <div>
                    <input height="10px" type="password" id="password">
                </div>
                <br style="clear: both;" />
            </div>
            <div>
               <span id="pwNull" class="error_label">
                   请输入密码！
               </span>
            </div>
            <div>
               <span id="msg" class="error_label">
               </span>
            </div>
            <div style="margin-left: 154px;">
                <div class="button" style="float: left">
                    <a href="#" onclick="login()">登&nbsp;录</a>
                </div>
                <div class="button" style="float: left; margin-left: 50px;">
                    <a href="#" onclick="resetLogin()">重&nbsp;置</a>
                </div>
                <br style="clear: both;"/>
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript" type="text/javascript">
       $("body").keydown(function(e) {
           if(e.keyCode == 13) {// 回车触发登录
               login();
               return false;
           }
       });
       var pic1 = /*[[${pic1}]]*/ '/';
       var pic2 = /*[[${pic2}]]*/ '/';

       document.body.style.backgroundImage='url('+pic1+')';
       document.body.style.backgroundRepeat = 'no-repeat';
       document.body.style.backgroundSize = '100% 100%';
       document.getElementById("loginDiv").style.backgroundImage='url('+pic2+')';
       document.getElementById("loginDiv").style.backgroundRepeat = 'no-repeat'
       document.getElementById("loginDiv").style.backgroundSize = '100% 100%';
    /*
     *重置方法
     */
     function resetLogin(){
        $('#username').val('');
        $('#password').val('');
         $('#unNull').css('visibility','hidden');
         $('#pwNull').css('visibility','hidden');
     }

    // 刷新验证码
    var $captchaImage = $("#captchaImage");
    if ($captchaImage) {
        $captchaImage.click( function() {
            var timestamp = (new Date()).valueOf();
            var imageSrc = $captchaImage.attr("src");
            if(imageSrc.indexOf("?") >= 0) {
                imageSrc = imageSrc.substring(0, imageSrc.indexOf("?"));
            }
            imageSrc = imageSrc + "?timestamp=" + timestamp;
            $captchaImage.attr("src", imageSrc);
        });
    }

    //绑定用户名录入清空报警
    $('#username').on('input',function(){
        if($('#username').val()==''){
            $('#unNull').css('visibility','visible');
        }else{
            $('#unNull').css('visibility','hidden');
        }
    });
    $('#password').on('input',function(){
        if($('#password').val()==''){
            $('#pwNull').css('visibility','visible');
        }else{
            $('#pwNull').css('visibility','hidden');
        }
    });

    /*
     *登录方法
     */
    function login(){
        $('#msg').text('').css('visibility','hidden');

        var username = $('#username').val();
        var password = $('#password').val();
        if($('#username').val()==''){
            $('#unNull').css('visibility','visible');
            return;
        }else{
            $('#unNull').css('visibility','hidden');
        }
        if($('#password').val()==''){
            $('#pwNull').css('visibility','visible');
            return;
        }else{
            $('#pwNull').css('visibility','hidden');
        }

        //跳转页面
        var loginUrl = /*[[@{/login}]]*/ '/';
        $.post(loginUrl, {username: username, password: password}, function(data){
            if (data.ok) {// 验证成功
                window.location.href="admin";
            } else {
                $('#msg').text(data.msg).css('visibility','visible');
            }
        }, 'json');
    }

   </script>

</body>
</html>
